<template>
  <div class="register">
    <el-form
      ref="registerForm"
      :model="form"
      label-width="0px"
      :rules="rules"
      size="large"
    >
      <el-form-item
        prop="username"
        inline-message
        class="animate__animated animate__bounceInRight"
      >
        <el-input v-model="form.username" placeholder="用户名" clearable
          ><template #prefix>
            <el-icon>
              <IEpUser></IEpUser>
            </el-icon> </template
        ></el-input>
      </el-form-item>
      <el-form-item
        prop="password"
        class="animate__animated animate__bounceInLeft"
      >
        <el-input
          v-model="form.password"
          type="password"
          placeholder="密码"
          clearable
          show-password
          ><template #prefix>
            <el-icon>
              <IEpLock></IEpLock>
            </el-icon> </template
        ></el-input>
      </el-form-item>
      <el-form-item
        prop="verifypass"
        class="animate__animated animate__bounceInLeft"
      >
        <el-input
          v-model="form.verifypass"
          type="password"
          placeholder="确认密码"
          clearable
          show-password
          ><template #prefix>
            <el-icon>
              <IEpLock></IEpLock>
            </el-icon> </template
        ></el-input>
      </el-form-item>
      <el-form-item
        prop="phone"
        class="animate__animated animate__zoomInUp"
        style="animation-duration: 800ms"
      >
        <el-input v-model="form.phone" placeholder="手机号码" clearable>
          <template #prefix>
            <el-icon>
              <IEpIphone></IEpIphone>
            </el-icon>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item
        prop="identifyCode"
        class="identifyCode animate__animated animate__zoomInUp"
        style="animation-duration: 800ms"
      >
        <el-input
          v-model="form.identifyCode"
          placeholder="手机验证码"
          clearable
        >
          <template #prefix>
            <el-icon>
              <IEpkey></IEpkey>
            </el-icon>
          </template>
          <template #append>
            <el-button type="primary" color="#626aef" :disabled="sj < 60"
              >获取验证码{{ sj }}</el-button
            >
          </template>
        </el-input>
      </el-form-item>
      <el-form-item
        class="animate__animated animate__zoomInUp"
        style="animation-duration: 1200ms"
      >
        <el-button
          type="primary"
          class="submit"
          color="#626aef"
          @click="submitForm(registerForm)"
          >注册
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts">
export default {
  // name:'register'
};
</script>
<script setup lang="ts">
import { FormInstance } from "element-plus/es";
import { useDheader } from "../../store/Dheader";
const Dheader = useDheader();
const form = reactive({
  username: "",
  password: "",
  verifypass: "",
  phone: "",
  identifyCode: "",
});
const sj = ref(60);
const si = setInterval(() => {
  sj.value--;
  if (sj.value == 0) clearInterval(si);
}, 1000);

const registerForm = ref<FormInstance>();
const validateName = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error("用户名不能为空！"));
  }
  // callback();
  value == "1" ? callback() : callback(new Error("用户名不存在！"));
};

const validatePass = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error("密码不能为空！"));
  }
  // callback();
  value == "123" ? callback() : callback(new Error("密码错误！"));
};

const validateCode = (rule: any, value: any, callback: any) => {
  if (!value) {
    return callback(new Error("请输入验证码！"));
  }
  value === Dheader.header.row1.login.identifyCode
    ? callback()
    : callback(new Error("验证码错误！"));
};
const rules = reactive({
  username: [{ validator: validateName, trigger: "blur" }],
  password: [{ validator: validatePass, trigger: "blur" }],
  identifyCode: [{ validator: validateCode, trigger: "blur" }],
});

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    console.log(1);
    if (valid) {
      formEl.resetFields();
      console.log("注册成功!");
    } else {
      console.log("注册失败!");
      // ElMessage({
      //   type: "error",
      //   message: "用户名或密码错误！",
      //   duration: 500,
      // });
      return false;
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
</script>
<style scoped lang="scss">
.register {
  position: absolute;
  top: 5%;
  width: 100%;
  height: 95%;
  background-color: rgb(255, 255, 255);
  transition: all 0.5s ease;

  .el-form {
    padding: 50px;
    height: 60%;

    .identifyCode {
      :deep(.el-input-group__append) {
        padding: 0px;

        .el-button {
          width: 150px;
        }
      }
    }

    // .identifyCode {
    //     .el-input {
    //         width: 300px;
    //     }

    // }

    .submit {
      width: 100%;
      height: 20px;
    }
  }
}
</style>
